<template>
  <div id="container" class="box">
    
    <div id="toolbar" class="special_focus_toolTip">
      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:10px;">
        <legend style="text-align:center"><span style="color:yellow;font-weight:bold;font-size:18px;">地图操作</span></legend>
        <span style="color:aqua;margin-left:10px;">鼠标左键地图平移，拖动鼠标右键地图放大缩小，长按鼠标滚轮旋转地图,滚动鼠标滚轮也可放大缩小地图。</span>
      </fieldset>
      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:20px;">
        <legend style="text-align:center"><span style="color:yellow;font-weight:bold;font-size:18px;">数据浏览</span></legend>
          <center>
            <button style="margin-top:10px;margin-left:0px;margin-bottom:10px;cursor:pointer;border:1px solid aqua;height:40px;border-radius:5px;color:aqua;background: rgba(66, 85, 99, 0.5);">
              <span style="margin-left:10px;margin-right:10px;font-size:14px;" @click="loadPoints">加载数据</span>
            </button>
            <button style="margin-top:10px;margin-left:10px;margin-bottom:10px;cursor:pointer;border:1px solid aqua;height:40px;border-radius:5px;color:aqua;background: rgba(66, 85, 99, 0.5);">
              <span style="margin-left:10px;margin-right:10px;font-size:14px;" @click="clearResult">清除数据</span>
            </button>
          </center>
      </fieldset>
      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:20px;margin-bottom:10px;">
        <legend style="text-align:center"><span style="color:yellow;font-weight:bold;font-size:18px;">加载数据量</span></legend>
          <div style="margin-top:10px;margin-bottom:10px;">
            <center>
              <span style="color:yellow;font-size:30px;font-weight:bold;">{{ count }}</span> <span style="color:aqua;">个对象</span>
            </center>
          </div>
      </fieldset>
    </div>
    <div id="cesiumContainer" ></div>
  </div>
</template>
<script>

import { getAllPoints } from "@/api/system/catagory";

  export default {
    data() {
      return {
        points: [],
        type: null,
        Cesium: {},
        count: 0,
      }
    },
    created() {
      this.getPoints(this.$route.query);
    },
    mounted() {
      this.init();
      setTimeout(() => {
        this.loadPoints();
      }, 3000);
    },
    computed: {},
    methods: {
      clearResult(){
        window.viewer.entities.removeAll();
      },
      getPoints(row){
        getAllPoints(row).then(res =>{
          this.type = res.data.type;
          this.points = res.data.list;
          this.count = res.data.list.length;
        })
      },
      loadPoints(){
        if(this.type=="point"){
          if(this.points.length>0){
            this.points.forEach(entity => {
              window.viewer.entities.add({
                // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置
                id: entity.ID,
                infos: entity,
                position: this.Cesium.Cartesian3.fromDegrees(entity.SPACEY,entity.SPACEX, 3000),
                point: {
                  // 点的大小（像素）
                  pixelSize: 8,
                  // 点位颜色，fromCssColorString 可以直接使用CSS颜色
                  color: this.Cesium.Color.GOLD,
                  // 边框颜色
                  outlineColor: this.Cesium.Color.GOLD,
                  // 边框宽度(像素)
                  outlineWidth: 2,
                  // 显示在距相机的距离处的属性，多少区间内是可以显示的
                  // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
                  heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND,
                }
              });
            });
            this.points.forEach(entity => {
              window.viewer.entities.add({
                name: entity.ID,
                position: this.Cesium.Cartesian3.fromDegrees(entity.SPACEY,entity.SPACEX,10),
                label: { //文字标签
                  text : entity.ID,
                  font : '10pt Source Han Sans CN',    //字体样式
                  fillColor: this.Cesium.Color.BLACK,        //字体颜色
                  backgroundColor: this.Cesium.Color.AQUA,    //背景颜色
                  showBackground:true,                //是否显示背景颜色
                  style: this.Cesium.LabelStyle.FILL,        //label样式
                  outlineWidth : 2,
                  verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,//垂直位置
                  horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,//水平位置
                  heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND
                },
              });
            });
          }
        }else if(this.type=="line"){
          if(this.points.length>0){
            this.points.forEach(entity => {
              let positions = new Array();
              for(let x=0;x<entity.line.length;x++){
                positions.push(entity.line[x].Y);
                positions.push(entity.line[x].X);
              }
              window.viewer.entities.add({
                name: entity.ID,
                polyline: {
                    show: true, //是否显示，默认显示
                    positions: this.Cesium.Cartesian3.fromDegreesArray(positions),
                    width: 2, //线的宽度（像素），默认为1
                    material: this.Cesium.Color.RED, //线的颜色，默认为白色
                    clampToGround: true,
                    zIndex: 100
                }
              });
              viewer.entities.add({
                name: entity.ID,
                position: this.Cesium.Cartesian3.fromDegrees(entity.line[0].Y,entity.line[0].X,10),
                label: { //文字标签
                  text : entity.ID,
                  font : '10pt Source Han Sans CN',    //字体样式
                  fillColor: this.Cesium.Color.BLACK,        //字体颜色
                  backgroundColor: this.Cesium.Color.AQUA,    //背景颜色
                  showBackground:true,                //是否显示背景颜色
                  style: this.Cesium.LabelStyle.FILL,        //label样式
                  outlineWidth : 2,
                  verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,//垂直位置
                  horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,//水平位置
                  heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND
                },
              });
            });
          }
        }else if(this.type=="polygon"){
          if(this.points.length>0){
            this.points.forEach(entity => {
              let positions = new Array();
              for(let x=0;x<entity.polygon.length;x++){
                positions.push(entity.polygon[x].Y);
                positions.push(entity.polygon[x].X);
              }
              window.viewer.entities.add({
                name: entity.ID,
                polygon: {
                  hierarchy: this.Cesium.Cartesian3.fromDegreesArray(positions),
                  height: 0.0,  // height is required for outline to display
                  // 配置填充面材质
                  material: Cesium.Color.GOLD.withAlpha(0.5),
                  // 配置边框线
                  outline: true,
                  outlineColor: Cesium.Color.AQUA,
                }
              });
            });
          }
        }
        window.viewer.camera.flyTo({
          destination : this.Cesium.Cartesian3.fromDegrees(-64.89329933564302,44.15161355126874, 150000)
        });
      },
      async init() {
        if (process.env.NODE_ENV !== 'production') {
          window['CESIUM_BASE_URL'] = './static/cesium'
        } else {
          window['CESIUM_BASE_URL'] = './static/cesium'
        }
        let Cesium = require('cesium/Source/Cesium');
        const _this = this;
        _this.Cesium = Cesium;
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYzI1YjE0MS05YjYzLTQ4MjYtODAyMS03YTdmZTllYjlmNTIiLCJpZCI6NjE3NDQsImlhdCI6MTY5NzQ1NzM0Mn0.4iT43DCcj3UiNeg6fbf5sfEp-wcHFwYzym6YV9KV8O4';
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
        var viewer = new Cesium.Viewer('cesiumContainer'
        , {
          terrainProvider: Cesium.createWorldTerrain(),
          animation: false, //是否显示动画控件
          shouldAnimate: false,
          homeButton: true, //是否显示Home按钮
          fullscreenButton: false, //是否显示全屏按钮
          baseLayerPicker: false, //是否显示图层选择控件
          geocoder: false, //是否显示地名查找控件
          timeline: false, //是否显示时间线控件
          // creditContainer: "credit", //版权图标
          sceneModePicker: false, //是否显示投影方式控件
          navigationHelpButton: false, //是否显示帮助信息控件
          infoBox: false, //是否显示点击要素之后显示的信息
          selectionIndicator: false, //是否启用地图选择
          // sceneModePicker: true,//是否启用场景选择小部件
          // requestRenderMode: false, //启用请求渲染模式
          //sceneMode: 3,
          shadows: false,
          imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
          }),
          contextOptions: {
            webgl: {
              antialias: true,
              multisample: true
            }
          }
        }
        );
        viewer.homeButton.container.childNodes[0].title = "回到初视图";
        viewer._cesiumWidget._creditContainer.style.display = "none";
        viewer.scene.debugShowFramesPerSecond = false;
        viewer.scene.globe.enableLighting = false;  //昼夜划分
        window.viewer = viewer;
      },
    },
  }

</script>
<style lang="scss" scoped>
@import url('https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css');
  html,
  body,

  #container{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
  }
  #cesiumContainer {
    width: inherit;
    height: inherit;
  }

  .box {
    height: 100%;
  }

  .special_focus_toolTip {
    margin: 5px;
    z-index: 7;
    position: absolute;
    display: block;
    width: 460px;
    height: auto;
    border-style: solid;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
      top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(66, 85, 99, 0.5);
    border-width: 0px;
    border: 1px solid aqua;
    border-radius: 4px;
    color: #ffffff;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 21px;
    padding: 10px 10px;
  }
/* 下划线切换高亮 */
::v-deep .el-tabs__active-bar {
  background-color: yellow;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: aqua
}

/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  color: yellow;
  opacity: 1;
}
/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: yellow;
  cursor: pointer;
  opacity: 1;
}
::v-deep .el-tabs__item {
  color: aqua;
  opacity: 1;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  color:aqua;
  border: 1px solid aqua;
}

::v-deep .el-input__inner::-webkit-input-placeholder{
  color: aqua; // 初始化的文字颜色
}

/*最外层透明*/
::v-deep .el-table{
  background-color: transparent !important;
  color: aqua;
  border: none !important;
  border-bottom: 1px solid aqua !important;
}

::v-deep .el-table th {
  background-color: transparent!important;
  border: 1px solid aqua !important;
  color: aqua;
}

::v-deep .el-table tr {
  background-color: transparent !important;
  border: 1px solid aqua !important;
}

::v-deep .el-table td {
  background-color: transparent!important;
  border: 1px solid aqua !important;
}

::v-deep .el-pagination.is-background .btn-prev {
  background: transparent !important; 
  border: 1px solid aqua;
  color: aqua;
}
::v-deep .el-pagination.is-background .btn-next{
  background: transparent !important; 
  border: 1px solid aqua;
  color: aqua;
}
#bottom-right {
  background: rgba(66, 85, 99, 0.5);
  padding: 4px;
  border-radius: 4px;
  position: absolute;
  display: block;
  height: auto;
  top: 0px;
  right: 0px;
}
::v-deep .el-tree{
  background: transparent !important; 
  color: aqua;
}
::v-deep .el-tree-node__content:hover {
  background: rgba(104,147,215,0.4);// hover 节点背景色，否则是白色
}
::v-deep .el-tree-node:focus>.el-tree-node__content {
  background-color: rgba(0,0,0,0); // focus 节点背景透明，否则是白色
}
</style>
